<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-card shadow="never">
        <el-input style="width: 600px">

        </el-input>
      </el-card>
    </el-col>
  </el-row>


  <el-row :gutter="20">
    <el-col :span="6">
      <el-card shadow="hover" body-style="background: linear-gradient(to right, #9fe1fa, #f4edc9);">
        <div style="display: flex;justify-content: space-between">
          <div  style="display: flex;flex-direction:column;justify-content: space-between">
            <el-text style="font-size: 40px" tag="b" type="primary">Bold</el-text>
            <el-text class="w-100px">Self elementelement set width element set width element set width  set width 100px</el-text>
          </div>
          <div style="display: flex;align-items: center">
            <Share class="icon"/>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" body-style="background: linear-gradient(to right, #9fe1fa, #f4edc9);">
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" body-style="background: linear-gradient(to right, #9fe1fa, #f4edc9);">
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" body-style="background: linear-gradient(to right, #9fe1fa, #f4edc9);">
      </el-card>
    </el-col>
  </el-row>


  <el-row :gutter="20">
    <el-col :span="20">
      <el-card shadow="never">
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card shadow="never">
      </el-card>
    </el-col>

  </el-row>


</template>

<script setup>
import {ref} from 'vue'
import {useLocalStorage} from '@vueuse/core'


</script>

<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
}

.icon {
  width: 4em;
  height: 4em;
}

.w-100px {
  width: 160px;
}
</style>
